<template>
    <div class="public-detail">
        <el-dialog
                class="public-dialog"
                title="案件信息"
                :visible.sync="acceptData.publicDialogVisible"
                :modal="false"
                :close-on-click-modal="false"
                :before-close="close">
            <!--案件详情——公共页面——开始-->
            <div class="case-details" >
                <div class="left-info" v-loading="loading">
                    <p class="title-name">市级案件信息</p>
                    <div class="info-content">
                        <div style="height:calc(100% - 300px);overflow-y: auto;">
                            <div class="top-box">
                                <div class="block-item">
                                    <span class="item-name">市级任务号：</span>
                                    <span class="item-value">
                                        <el-input v-model="acceptForm.taskNum" disabled></el-input>
                                    </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">区级任务号：</span>
                                    <span class="item-value">
                                        <el-input v-model="acceptForm.otherTaskNum" disabled></el-input>
                                    </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">问题来源：</span>
                                    <span class="item-value">
                                            <el-input v-model="acceptForm.eventSrcId" disabled></el-input>
                                        </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">所属区域：</span>
                                    <span class="item-value">
                                            <el-input v-model="acceptForm.districtName" disabled></el-input>
                                        </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">所属街办：</span>
                                    <span class="item-value">
                                            <el-input v-model="acceptForm.streetName" disabled></el-input>
                                        </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">所属社区：</span>
                                    <span class="item-value">
                                            <el-input v-model="acceptForm.communityCode" disabled></el-input>
                                        </span>
                                </div>
                                <div class="line-item">
                                    <span class="item-name">案件类型：</span>
                                    <span class="item-value">
                                        <el-input v-model="acceptForm.recTypeId"
                                                  disabled></el-input>
                                    </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">问题级别：</span>
                                    <span class="item-value">
                                            <el-input v-model="acceptForm.eventLevelID" disabled></el-input>
                                        </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">问题类型：</span>
                                    <span class="item-value">
                                            <el-input v-model="acceptForm.eventTypeCode" disabled></el-input>
                                        </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">问题大类：</span>
                                    <span class="item-value">
                                            <el-input v-model="acceptForm.mainTypeCode" disabled></el-input>
                                        </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">问题小类：</span>
                                    <span class="item-value">
                                            <el-input v-model="acceptForm.subTypeCode" disabled></el-input>
                                        </span>
                                </div>
                                <div class="line-item">
                                    <span class="item-name">上报人：</span>
                                    <span class="item-value">
                                        <el-input v-model="acceptForm.humanName" disabled></el-input>
                                    </span>
                                </div>
                                <div class="line-item">
                                    <span class="item-name">上报人电话：</span>
                                    <span class="item-value">
                                        <el-input v-model="acceptForm.cellphone" disabled></el-input>
                                    </span>
                                </div>
                                <div class="line-item">
                                    <span class="item-name">问题描述：</span>
                                    <span class="item-value">
                                        <el-input type="textarea" v-model="acceptForm.eventDesc" maxlength="500"
                                                  show-word-limit disabled style="height:100%;"
                                                  class="desc-textarea"></el-input><!--:rows="2"-->
                                    </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">地址描述：</span>
                                    <span class="item-value">
                                                <el-input v-model="acceptForm.address" disabled></el-input>
                                            </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">回退原因：</span>
                                    <span class="item-value">
                                        <el-input v-model="acceptForm.createTime" disabled></el-input>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="map-box-left" style="position:relative">
                            <div id="myMap1"></div>
                            <!-- 图片 -->
                            <div class="left-info-picture">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="right-process" v-loading="loading">
                    <p class="title-name">案件信息</p>
                    <div class="info-content">
                        <div style="height:calc(100% - 300px);overflow-y: auto;">
                            <div class="top-box">
                                <div class="block-item">
                                    <span class="item-name">案件名称：</span>
                                    <span class="item-value">
                                        <el-input v-model="form.eventName" disabled></el-input>
                                    </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">案件来源：</span>
                                    <span class="item-value">
                                        <el-input v-model="form.eventSrcTypeName" disabled></el-input>
                                    </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">案件类别：</span>
                                    <span class="item-value">
                                            <el-input v-model="form.eventTypeName" disabled></el-input>
                                        </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">案件大类：</span>
                                    <span class="item-value">
                                            <el-input v-model="form.eventTypeLv1Name" disabled></el-input>
                                        </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">案件小类：</span>
                                    <span class="item-value">
                                            <el-input v-model="form.eventTypeLv2Name" disabled></el-input>
                                        </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">处置时限：</span>
                                    <span class="item-value">
                                            <el-input v-model="form.time" disabled></el-input>
                                        </span>
                                </div>
                                <div class="line-item">
                                    <span class="item-name">立案条件：</span>
                                    <span class="item-value">
                                        <el-input v-model="form.archivesTypeLeveThree.starConditions"
                                                  disabled></el-input>
                                    </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">所属部门：</span>
                                    <span class="item-value">
                                            <el-input v-model="form.deptName" disabled></el-input>
                                        </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">一级行业：</span>
                                    <span class="item-value">
                                            <el-input v-model="form.industryTypeLv1Name" disabled></el-input>
                                        </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">二级行业：</span>
                                    <span class="item-value">
                                            <el-input v-model="form.industryTypeLv2Name" disabled></el-input>
                                        </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">是否开放景区：</span>
                                    <span class="item-value">
                                        <span v-if="form.isOpenScenic == '0'">
                                            <el-input value="否" disabled></el-input>
                                        </span>
                                        <span v-if="form.isOpenScenic == '1'">
                                            <el-input value="是" disabled></el-input>
                                        </span>
                                    </span>
                                </div>
                                <div class="line-item">
                                    <span class="item-name">发生位置：</span>
                                    <span class="item-value">
                                        <el-input v-model="form.eventAddress" disabled></el-input>
                                    </span>
                                </div>
                                <div class="line-item">
                                    <span class="item-name">案件描述：</span>
                                    <span class="item-value">
                                        <el-input type="textarea" v-model="form.eventDescribe" maxlength="500"
                                                  show-word-limit disabled style="height:100%;"
                                                  class="desc-textarea"></el-input><!--:rows="2"-->
                                    </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">责任主体：</span>
                                    <span class="item-value">
                                                <el-input v-model="form.deptParentName" disabled></el-input>
                                            </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">上报电话：</span>
                                    <span class="item-value">
                                        <el-input v-model="form.eventReportPhone" disabled></el-input>
                                    </span>
                                </div>
                                <div class="block-item" >
                                    <span class="item-name">上报人姓名：</span>
                                    <span class="item-value">
                                        <el-input v-model="form.eventReportName" disabled></el-input>
                                    </span>
                                </div>
                                <div class="block-item">
                                    <span class="item-name">上报人电话：</span>
                                    <span class="item-value">
                                        <el-input v-model="form.eventCallPhone" disabled></el-input>
                                    </span>
                                </div>

                                <div class="block-box">
                                    <div class="block-item">
                                        <span class="item-name">是否延期：</span>
                                        <span class="item-value">
                                            <el-input v-model="form.archivesTypeLeveThree.isYq" disabled></el-input>
                                        </span>
                                    </div>
                                    <div class="block-item">
                                        <span class="item-name">是否缓办：</span>
                                        <span class="item-value">
                                            <el-input v-model="form.archivesTypeLeveThree.isHb" disabled></el-input>
                                        </span>
                                    </div>
                                </div>
                                <div class="block-box">
                                    <div class="block-item">
                                        <span class="item-name">是否突发：</span>
                                        <span class="item-value">
                                             <el-input v-model="form.archivesTypeLeveThree.isTf" disabled></el-input>
                                        </span>
                                    </div>
                                    <div class="block-item">
                                        <span class="item-name">是否紧急：</span>
                                        <span class="item-value">
                                            <el-input v-model="form.archivesTypeLeveThree.isJj" disabled></el-input>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="map-box" style="position:relative">
                            <div id="myMap"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--案件详情——公共页面——结束-->
        </el-dialog>
    </div>
</template>

<script>
    import Cookies from 'js-cookie'
    import Viewer from 'viewerjs'
    import 'viewerjs/dist/viewer.css'
    import {getEventInfo} from '@/api/case/caseenforcement.js' 
    export default {
        name: 'PublicDialog',
        props:{
            acceptData:{
                type:Object,
                default:()=>{
                    return {}
                }
            }
        },
        mounted(){
            this.acceptForm = this.acceptData.data
            this.getEventInfo(this.acceptData.data.eventId)
            this.acceptMap(this.acceptForm)
        },
        data() {
            return {
                GDMap:null,
                acceptGDMap:null,
                loading: false,
                // 案件信息表单数据
                form: {
                    //判断是从哪个页面进来的
                    type: null,//0-全部案件详情，1-待审批，2-案件挂起，3-案件办理（转办），4-案件处理（受理、审核），5-案件处置（审核），6-评价统计
                    //案件名称
                    eventName: '',
                    // 案件来源
                    eventSrcType: '',
                    eventSrcTypeName: '',
                    // 上报电话
                    eventReportPhone: '',
                    // 上报人
                    eventReportName: '',
                    // 上报人电话
                    eventCallPhone: '',
                    // 案件类别
                    eventType: '',
                    eventTypeName: '',
                    // 案件大类
                    eventTypeLv1: '',
                    eventTypeLv1Name: '',
                    // 案件小类
                    eventTypeLv2: '',
                    eventTypeLv2Name: '',
                    // 处置时限
                    time: '',
                    // 责任主体
                    deptParentCode: '',
                    deptParentName: '',
                    // 所属部门
                    deptCode: '',
                    deptName: '',
                    // 一级行业
                    industryTypeLv1: '',
                    industryTypeLv1Name: '',
                    // 二级行业
                    industryTypeLv2: '',
                    industryTypeLv2Name: '',
                    archivesTypeLeveThree: {
                        // 立案条件
                        starConditions: '',
                        // 是否延期
                        isYq: '',
                        // 是否缓办
                        isHb: '',
                        // 是否突发
                        isTf: '',
                        // 是否紧急
                        isJj: '',
                    },

                    // 发生位置
                    eventAddress: '',
                    // 是否开放景区
                    isOpenScenic: '',
                    // 发生位置X坐标
                    gdx: '',
                    // 发生位置Y坐标
                    gdy: '',
                    // 案件描述
                    eventDescribe: '',
                    // 案件级别（目前没有）
                    eventLevel: 0,
                    eventEvaluate: {
                        evaluateStatus: "1",
                        evaluateTime: "2020-10-12T15:56:12.000+0800",
                    },
                    newEventId: ''
                },
                // 市级案件信息表单数据
                acceptForm:{}
            }
        },
        methods: {
            /**
             * Description:左侧地图初始化
             * Author:wkj
             * Date:2021/12/29
             */
            acceptMap(form){
                this.$nextTick(()=>{
                    this.acceptGDMap = new AMap.Map('myMap1', {
                        zoom: 17,
                        viewMode: '3D',
                        center: [108.99569, 34.20124],
                        resizeEnable: true,
                    });
                })
                // if(form.gdx == null || form.gdy == null){
                
                // }else{
                //     this.GDMap = new AMap.Map('myMap1', {
                //         zoom: 17,
                //         viewMode: '3D',
                //         center: [form.gdx, form.gdy],
                //         resizeEnable: true,
                //     });
                // }
            },
            /**
             * Description:右侧地图初始化
             * Author:wkj
             * Date:2021/12/29
             */
            initMap(form){
                let _this = this;
                // 高德地图初始化
                if(form.gdx == null || form.gdy == null){
                    this.GDMap = new AMap.Map('myMap', {
                        zoom: 17,
                        viewMode: '3D',
                        center: [108.99569, 34.20124],
                        resizeEnable: true,
                    });
                }else{
                    this.GDMap = new AMap.Map('myMap', {
                        zoom: 17,
                        viewMode: '3D',
                        center: [form.gdx, form.gdy],
                        resizeEnable: true,
                    });
                }
            },
            /**
             * Description:关闭弹框
             * Author:wkj
             * Date:2021/12/29
             */
           close() {
                this.$emit('closeDialog'); //通知父组件改变
            },
            /**
             * Description:获取案件信息数据
             * Author:wkj
             * Date:2021/12/29
             */
            getEventInfo(id){
                this.loading = true,
                getEventInfo(id).then((res)=>{
                    if(res.code == 200){
                        this.form = res.data;
                        this.initMap(this.form);
                        this.loading = false;
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    .public-detail {
        .paiqian {
            .el-radio {
                .el-radio__label {
                    span {
                        &:nth-of-type(1) {
                            width: 1.5625rem;
                            display: inline-block;
                        }
                    }
                }
            }

            .selectPerson {
                height: 130px;
                background: #eeeeee;
                border-radius: 10px;
                margin: 0 auto;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                align-content: center;

                .InspectorMes {
                    display: flex;
                    align-items: baseline;

                    img {
                        width: 0.25rem;
                        height: 0.275rem;
                        margin-right: 0.125rem;
                    }

                    .name {
                        font-size: 0.25rem;
                        color: #2b7caa;
                    }

                    .identity {
                        font-size: 0.15rem;
                        color: #8a8a8a;
                    }

                    span {
                        display: inline-block;
                        margin-right: 0.125rem;
                    }

                    .phone {
                        font-size: 0.175rem;
                        color: #8a8a8a;
                    }

                    .break {
                        display: inline-block;
                        margin: 0 0.125rem;
                        width: 0.1875rem;
                    }
                }

                .times {
                    width: 4.4rem;
                    font-size: 0.175rem;
                    color: #72aacb;
                    text-align: center;
                    border-top: 0.0125rem solid #8a8a8a;
                    margin-top: 0.0625rem;
                    padding-top: 0.0625rem;
                }
            }

            .paiqianTop {
                background: #EEEEEE;
                border-radius: 10px;
                width: 100%;
                margin: 0 auto;
                margin-top: -10px;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                padding: 15px 0 5px;
                height: 130px;
                line-height: 98px;
                font-weight: 600;
                letter-spacing: 2px;

                .p1 {
                    font-size: 0.275rem;
                    color: #5c9cc1;
                    width: 100%;
                    margin: 0;
                    text-align: center;
                }

                .p2 {
                    font-size: 0.175rem;
                    color: #989696;
                    width: 100%;
                    margin: 0;
                    text-align: center;
                    margin-top: 0.1rem;
                    margin-bottom: 0.0625rem;
                }

                img {
                    width: 0.325rem;
                }
            }

            .Inspectors {
                position: relative;
                height: 2.75rem;
                border-top: 0.0125rem solid #c7c7c7;
                margin-top: 0.2875rem;
                border-bottom: 0.0125rem solid #c7c7c7;

                .tips {
                    width: 1.375rem;
                    display: flex;
                    justify-content: center;
                    background: #fff;
                    position: absolute;
                    top: -0.1875rem;
                    left: 0;
                    right: 0;
                    margin: auto;
                    color: #fff;

                    span {
                        display: inline-block;
                        padding: 0.075rem 0.275rem;
                        margin: 0 auto;
                        width: 1.25rem;
                        background: #72aacb;
                        border-radius: 0.625rem;
                    }
                }

                .xjyDiv {
                    height: 2.5rem;
                    overflow-y: auto;
                    margin-top: 0.1875rem;

                    .dinp1 {
                        position: relative;
                        overflow: hidden;
                        height: 0.5rem;
                        display: flex;
                        align-items: center;
                        margin: 0;
                        margin-top: 0.1rem;
                        margin-bottom: 0.1rem;
                        font-size: 0.1875rem;

                        &:hover {
                            height: 0.5rem;
                            background: #f1f1f1;
                            color: #438eb9;
                        }

                        .el-radio__label {
                            font-size: 0.1875rem;
                        }

                        .el-radio__inner {
                            width: 0.225rem;
                            height: 0.225rem;

                        }

                        .el-radio__input.is-checked .el-radio__inner {
                            border-color: #72aacb;
                            background: #72aacb;
                        }

                        .el-radio__input.is-checked + .el-radio__label {
                            color: #72aacb;
                        }
                    }
                }
            }
        }
    }

    .public-dialog {
        position: absolute !important;
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding: 10px 15px !important;

        & > .el-dialog {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            margin-top: 0 !important;
            overflow: hidden;

            .el-dialog__body {
                display: flex;
                flex: 1;
                padding: 0 !important;
                overflow: hidden;

            }
        }
    }

    .case-details {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        padding: 0.1875rem;

        .left-info {
            display: flex;
            flex-direction: column;
            width: 49%;
            height: 100%;
            background-color: #FFFFFF;
            border: 0.0125rem solid #A40000;
            overflow: hidden;

            .title-name {
                height: 0.4375rem;
                line-height: 0.4375rem;
                background: #A40000;
                text-align: center;
                color: #fff;
                font-size: 0.225rem;
                margin: 0 !important;
            }

            .info-content {
                display: flex;
                flex-direction: column;
                flex: 1;
                overflow: auto;

                .top-box {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    padding-right: 0.25rem;
                    margin-top:0.125rem;
                }
                .map-box-left {
                    width: 100%;
                    height: 4.7rem;
                    min-height: 4.7rem;
                    border-top: 0.0125rem solid #ddd;
                    padding: 0.125rem;
                    display: flex;
                    #myMap1 {
                        width: 48%;
                        height: 100%;
                    }
                    .left-info-picture{
                        width: 48%;
                        height: 100%;
                    }
                }
            }

            .foot-btn {
                border-top: 0.0125rem solid #ddd;
                padding: 0 0.25rem 0.125rem;
                text-align: right;

                div.btns {
                    display: inline-block;

                    .el-button {
                        margin-left: 0.125rem;
                    }
                }

                .el-button {
                    margin-top: 0.125rem;
                }
            }
        }

        .right-process {
            display: flex;
            flex-direction: column;
            width: 49%;
            height: 100%;
            background-color: #FFFFFF;
            border: 0.0125rem solid #A40000;
            overflow: hidden;

            .title-name {
                height: 0.4375rem;
                line-height: 0.4375rem;
                background: #A40000;
                text-align: center;
                color: #fff;
                font-size: 0.225rem;
                margin: 0 !important;
            }

            .info-content {
                display: flex;
                flex-direction: column;
                flex: 1;
                overflow: auto;

                .top-box {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    padding-right: 0.25rem;
                    margin-top:0.125rem;
                }
                .map-box {
                    width: 100%;
                    height: 4.7rem;
                    min-height: 4.7rem;
                    border-top: 0.0125rem solid #ddd;
                    padding: 0.125rem;

                    #myMap {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .foot-btn {
                border-top: 0.0125rem solid #ddd;
                padding: 0 0.25rem 0.125rem;
                text-align: right;

                div.btns {
                    display: inline-block;

                    .el-button {
                        margin-left: 0.125rem;
                    }
                }

                .el-button {
                    margin-top: 0.125rem;
                }
            }
        }

        .bigImg {
            .el-dialog__body {
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    width: auto !important;
                    height: auto;
                    max-width: 100%;
                    max-height: 100%;
                }
            }
        }
    }

    .el-dialog {
        .info-content {
            flex: 1;

            .bottom-box {
                flex: 1;
            }
        }

        .line-item {
            display: flex;
            width: 100%;
            margin-bottom: 0.125rem;
        }

        .block-box {
            width: 100%;
            display: flex;
        }

        .block-item {
            display: flex;
            width: 50%;
            margin-bottom: 0.125rem;
        }

        .item-name {
            width: 1.5rem;
            text-align: right;
            padding-right: 0.125rem;
            line-height: 0.425rem;
            font-size: 0.175rem;
            cursor: default;

            i {
                font-size: 0.225rem;
                color: #f00;
                padding-right: 0.0375rem;
            }
        }

        .item-value {
            flex: 1;

            .el-input input {
                height: 0.425rem;
                line-height: 0.425rem;
            }

            .el-select {
                width: 100%;
            }

            .desc-textarea.el-textarea.is-disabled {
                .el-textarea__inner {
                    height: 100%;
                }
            }
        }

        .happen-address {
            .el-input {
                width: calc(100% - 0.375rem);
            }

            img {
                width: 0.3rem;
                height: 0.3rem;
                margin-left: 0.0625rem;
                cursor: pointer;
                vertical-align: middle;
            }
        }
    }

    .edit-dialog-content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .case-details .left-info{
        margin-right: 20px;
    }
</style>
